<template>
  <div>
    <!-- 搜索页面头部 -->
    <div class="search-header">
      <!-- 回退按钮 -->
      <van-icon name="arrow-left" color="white" size="0.48rem" class="goBack" @click="goBack()" />
      <!-- 搜索组件 -->
      <van-search placeholder="请输入关键字" background="pink" shape="round" @input="inputFn" v-model="val"
        @search="enterResults(val)" />
    </div>
    <!-- 建议列表 -->
    <ul class="suggest-list" v-if="val.length !== 0">
      <li v-for="(str, index) in suggestList" :key=index class="suggest-item" v-html="lightFn(str, val)"
        @click="enterResults(str)">
      </li>
    </ul>
    <!-- 历史搜索列表 -->
    <div class="search-history" v-else>
      <!-- 标题 -->
      <van-cell title="搜索历史">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon name="delete" class="search-icon" @click="removeHistory" />
        </template>
      </van-cell>
      <!-- 历史列表 -->
      <div class="history-list">
        <span class="history-item" v-for="(str, index) in historyList" :key="index" @click="enterResults(str)">
          {{  str  }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { suggestAPI } from '@/api'
export default {
  data() {
    return {
      timer: null,
      // 输入框关键字
      val: '',
      // 关键字提示
      suggestList: [],
      // 搜索历史列表
      historyList: JSON.parse(localStorage.getItem('history')) || [
        'API',
        'java',
        'css',
        '前端',
        '后台接口',
        'python'
      ]
    }
  },
  methods: {
    // 回退到首页
    goBack() {
      this.$router.push('/layout/home')
    },
    // 输入框防抖
    inputFn() {
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 输入框没有值时， 清空联想菜单
        if (this.val.length === 0) this.suggestList = []
        else {
          // 有值时，发请求
          const { data: res } = await suggestAPI({
            query: this.val
          })
          this.suggestList = res.data.options
          console.log(this.suggestList)
        }
      }, 300)
    },
    // 关键字高亮
    lightFn(originStr, targetVal) {
      // 参数：原来的字符串，目标关键字
      // g全局替换，i匹配大小写，利用正则表达式
      const reg = new RegExp(targetVal, 'ig')
      return originStr.replace(reg, `<span style="color:red">${targetVal}</span>`)
    },
    /**  三个地方需要跳转
    1.输入框回车后，跳转到搜索结果页，search事件
    2.点击联想菜单，跳转到搜索结果页，click事件
    3.点击历史记录，跳转到搜索结果页,click事件**/
    // 跳转到搜索结果页
    enterResults(value) {
      // 跳转到搜索结果页之前，保存搜索的值
      if (value.length > 0) {
        this.historyList.push(value)
        setTimeout(() => {
          this.$router.push(`/results/${value}`)
        }, 300)
      }
    },
    // 保存搜索历史
    /* 1.输入框回车，保存搜索值
       2.点击联想菜单的项，保存菜单项值
     */
    //  删除搜索历史
    removeHistory() {
      this.historyList = []
    }

  },
  watch: {
    // 监听搜索历史列表的变化
    historyList() {
      // 只能在本地存储字符串
      localStorage.setItem('history', JSON.stringify([...new Set(this.historyList)]))
    }
  }

}
</script>

<style lang="less" scoped>
.search-header {
  height: 46px;
  display: flex;
  align-items: center;
  background-color: pink;
  overflow: hidden;

  //   /*后退按钮*/
  .goback {
    padding-left: 14px;
    width: 10px;
    height: 10px;
  }

  /*搜索组件*/
  .van-search {
    flex: 1;
  }
}

// 搜索联想
.suggest-list {
  .suggest-item {
    font-size: 14px;
    text-align: justify;
    padding-left: 10px;
  }
}

// 搜索历史
.search-icon {
  font-size: 16px;
  line-height: inherit;
}

.history-list {
  padding: 0 10px;
  text-align: left;

  .history-item {
    display: inline-block;
    font-size: 12px;
    padding: 8px 14px;
    background-color: #efefef;
    margin: 10px 8px 0px 8px;
    border-radius: 10px;

  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
}
</style>
